<template>
  <div>
    <van-nav-bar title="我的订单"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-card v-for="(item,index) in data"
              :key="index"
              :price="item.total.toFixed(2)"
              :desc="item.suborderStateLabel"
              :title="item.id"
              :thumb="item.suborderItems[0].goodsPic">
      <template #tags>
        <van-tag plain
                 type="danger">{{item.userName}}</van-tag>
        <van-tag plain
                 type="danger">{{item.userPhone}}</van-tag>

      </template>
      <template #footer>
        <van-button color="#7232dd"
                    v-for="(acitem,aindex) in item.cusActions"
                    :key="aindex"
                    @click="suborderAction(item,acitem.actionVale)">{{acitem.actionLabel}}</van-button>

      </template>
    </van-card>
    <van-action-sheet v-model="actionSheetShow"
                      :actions="actions"
                      @select="onSelect" />
    <van-action-sheet v-model="memberPayPass"
                      style="height:300px">
      <van-password-input :value="password"
                          :focused="showKeyboard"
                          @focus="showKeyboard = true" />

      <van-number-keyboard v-model="password"
                           :show="showKeyboard"
                           theme="custom"
                           close-button-text="完成"
                           @close="passValue"
                           @blur="showKeyboard = false"
                           @delete="onDelete" />
    </van-action-sheet>
    <!-- 密码输入框 -->

    <!-- 数字键盘 -->

  </div>
</template>
<script>
import { getSuborderList } from '@/api/suborder'
import { stringifyScs } from '@/api/request'
import { finishOrder } from '@/api/memberWallet'
import { Toast } from 'vant';
export default {
  components: {},
  props: {},
  data () {
    return {
      activeNames: [],
      showKeyboard: false,
      memberPayPass: false,
      MemberPayDTO: {},
      password: '',
      scs: [
        {

        }
      ], pc: {
        pageIndex: 1,
        pageSize: 200,
        total: 0
      }, filters: {
        keyword: ''
      },
      data: [],
      suborderSelected: {},
      actions: [{ name: '微信支付' }, { name: '会员支付' }],
      actionSheetShow: false
    }
  },

  computed: {},
  watch: {},
  methods: {
    load () {
      const paging = {
        p: this.pc.pageIndex,
        s: this.pc.pageSize
      };
      const filters = Object.assign(paging, this.filters, { scs: stringifyScs(this.scs) });
      getSuborderList(filters).then(res => {
        let ddk = res.data
        if (ddk.code === 100200)
        {
          this.data = ddk.data.records
        } else
        {
          Toast(ddk.message)
        }
      })
    }, onClickLeft () {
      this.$router.push({
        path: '/me'
      })
    }, suborderAction (item, action) {


      if (action === 'finishPaySuborder')
      {

        this.memberCardSelected = item
        this.actionSheetShow = true
      } else
      {
        console.log("执行action")
      }
      this.suborderSelected = item
    }, onSelect (item) {


      const oid = this.suborderSelected.id
      if (item.name === '会员支付')
      {
        this.actionSheetShow = false
        console.log("onSelect", item)
        this.MemberPayDTO.orderId = oid
        this.memberPayPass = true
      }
    }, onDelete () {

    }, passValue () {
      const p = this.password
      console.log("密码", this.password)
      this.actionSheetShow = false
      this.memberPayPass = false
      this.MemberPayDTO.password = p
      this.MemberPayDTO.orderId = this.suborderSelected.id
      finishOrder(this.MemberPayDTO).then(res => {
        this.password = ''
        if(res.data.code===100200){
           Toast(res.data.message)
           this.load()
        }else{
          Toast(res.data.message)
        }
      })

    }
  },
  created () { this.load() },
  mounted () { },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { }
}
</script>
<style lang='less'>
</style>